// //加载公共样式
require('../../assets/css/public.less')
// //加载自己的样式
require('./sportData.less');
// 引入字体图标
require('../../assets/public/fonts/iconfont.css')
// 引入axios
const request = require('../../lib/request/request')
// 引入图形
const echarts = require('echarts')
//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

// 获取元素
function $(sel) {
    return document.querySelector(sel)
}

window.onload = () => {
    //渲染柱状图
    function renderBar(series, xData) {
        //1 创建实例对象
        const myChart = echarts.init(document.querySelector('.sheet'))

        //2 写上配置项
        let option = {
            //标题组件
            title: {
                text: '近7天运动时长',
                left: 15,
                top: 15,
            },
            //提示框组件
            tooltip: {},
            //图例组件
            // legend: {},
            xAxis: {
                data: xData,
            },
            yAxis: {

            },
            //核心数据
            series: series,
        }

        //3 载入配置
        myChart.setOption(option)
    }


    //渲染饼图
    function renderPie() {
        //1 创建实例
        const myChart = echarts.init(document.querySelector('.picture'))

        //2 配置项
        let option = {
            title: {
                text: '运动分类',
                left: 15,
                top: 15,
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {
                            value: 25,
                            name: '训练',
                            label: {
                                // show: false,
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {

                                color: '#736171',
                            },
                        },
                        {
                            value: 35,
                            name: '跑步',
                            label: {
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#ee5c43',
                            },
                        },
                        {
                            value: 40,
                            name: '骑行',
                            label: {
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#58bb92'
                            },
                        },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                },
            ],
        }

        //3 导入配置
        myChart.setOption(option)
    }

    renderPie()

    // 获取运动数据
    function getSportData() {
        request.get('/api/exercise')
            .then(res => {
                console.log(res.data);
                // 结构数据
                let { data, errno } = res.data
                // 判断
                if (errno === 0) {
                    console.log(data.sumDuration);
                    // 渲染数据
                    $('.sk').textContent = data.sum7Calorie;//7天卡路里

                    console.log(data.days);
                    let data1 = data.days
                    // 渲染数据
                    randerData(data1)
                    //抽离x轴数据
                    let xData = data.days.map(v => v.date.slice(5))
                    //抽离name
                    let arr = ['count', 'sumCalorie', 'sumDuration', 'sumMeter']
                    let series = arr.map(name => ({
                        name: name,
                        type: 'bar',
                        data: data.days.map(v => v[name]),

                    }))

                    //渲染柱状图
                    renderBar(series, xData)
                }
            })
    }
    getSportData()

    // 渲染数据
    function randerData(data1) {
        console.log(data1[0]);
        // $('.imgHead').src = API + data.imgUrl
        $('.st').textContent = data1[0].sumDuration; //累计时长
        $('.xk').textContent = data1[0].sumCalorie;//累计卡路里

    }

    //获取用户信息==获取头像
    function getUserInfo() {
        request.get('/api/user/info')
            .then(res => {
                console.log(res);
                //1 解构数据
                let { errno, data } = res.data
                //2 判断
                if (errno === 0) {
                    //3 处理业务逻辑数据
                    render(data)
                }
            })
    }

    //渲染数据
    function render(data) {
        //图片渲染 服务器地址+相对路径+文件名
        $('.imgHead').src = API + data.imgUrl

    }
    //初始化获取用户信息
    getUserInfo()

}